﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>@ViewBag.Title</title>

    <link href="/Content/Button.css" rel="stylesheet">
    <link href="/Content/keyboard.css" rel="stylesheet">
    <link href="/Content/WebGrid.css" rel="stylesheet">


    <link rel="stylesheet" href="/Content/metropanel.css" type="text/css" />
    <style>
        .mp-menu {
            height:45px;
        }
    </style>

    <!-- jQuery Lib -->
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.js"></script>
    <!-- jQuery Easing -->
    <script type="text/javascript" src="/Scripts/Metro/jquery.easing.min.13.js"></script>
    <!-- mousewheel plugin -->
    <script type="text/javascript" src="/Scripts/Metro/jquery.mousewheel.min.js"></script>
    <!-- jScrollPane script -->
    <script type="text/javascript" src="/Scripts/Metro/jquery.jscrollpane.min.js"></script>

    <!-- MetroPanel -->
    <script type="text/javascript" src="/Images/metro-icons/metropanel.min.js"></script>

    <script type="text/javascript" src="/Scripts/jquery.fullscreen.js"></script>

    <script type="text/javascript" src="/Scripts/jquery.bpopup-0.7.0.min.js"></script>

    <!-- number format -->
    <script type="text/javascript" src="/Scripts/jquery.numberformatter-1.2.3.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.price_format.1.7.js"></script>

    <!-- jquery validate -->
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    @RenderSection("scripts", required: false)

    <!-- key board -->
    <script src="/Scripts/keyboard/jquery.keyboard.js"></script>
	<script src="/Scripts/keyboard/azerty.js"></script>
	<script src="/Scripts/keyboard/qwerty.js"></script>
	<script src="/Scripts/keyboard/form.js"></script>
	<script src="/Scripts/keyboard/jquery.selection.js"></script>

    @*Keyboard*@
    <script>

        $(document).ready(function () {
            $('body').keyboard({ keyboard: 'azerty', plugin: 'form' });

            var div = "<span id='btnCloseKeyboard' class='keyboard-key' style='position:absolute; top:5px; right:5px;background:gray;'>X</span>";
            $(".keyboard").append(div);

            $("#btnCloseKeyboard").click(function (e) {
                $(".keyboard").fadeOut();
            });
        });

	</script>
    @*End Keyboard*@

    <script laguage="javascript">
        //index vị trí của panel menu
        var index = 0;

        function resizeContent() {
            var clientWidth = $(window).width();
            var contentWidth = clientWidth - 300;

            if (index == -1) {
                $("#mp-contentholder").animate({ left: 0, width: clientWidth });
            }
            else {
                $("#mp-contentholder").animate({ width: contentWidth });
            }
        };


        $(document).ready(function () {
            // put all your jQuery goodness in here.
            $('.jspContainer').jScrollPane();

            $(".defaultBt").hide();

            resizeContent();

            $(window).resize(function () {
                // put all your jQuery goodness in here.
                //$('.jspContainer').jScrollPane();

                resizeContent();
            });

            //panelleft
            $(".mp-leftarrow").click(function () {

                index = index - 1;

                if (index == 0) {
                    $("#mp-contentholder").animate({ left: "300" }, "fast");

                    $("#metropanel, #mp-footerpanel").animate({ left: "0px" }, "easeOutBack");
                } else {
                    $("#mp-contentholder").animate({ left: "0" }, "fast");

                    $("#metropanel, #mp-footerpanel").animate({ left: "-330px" }, "easeOutBack", function () {
                        $("#mp-expand").animate({ left: 0 }, "slow", "easeOutBack");
                    });
                }

                $(".defaultBt").hide("slow");

                resizeContent();
            });

            //button right
            $(".mp-rightarrow").click(function () {
                index = index + 1;

                var clientWidth = $(window).width();
                var contentWidth = clientWidth - 300;
                if (contentWidth < 960) {
                    $("#metropanel, #mp-footerpanel").animate({ left: contentWidth }, "slow");
                    //content left = 0
                    $("#mp-contentholder").animate({ left: "0", width: contentWidth }, "slow");
                } else {
                    $("#metropanel, #mp-footerpanel").animate({ left: contentWidth }, "slow");
                    $("#mp-contentholder").animate({ left: "0", width: contentWidth }, "slow");
                }

                $(".defaultBt").show("slow");

                resizeContent();
            });

            //show menuleft
            $("#mp-expand, .defaultBt").click(function () {
                index = 0;

                $("#mp-expand").animate({ left: "-70px" }, function () {
                    $("#metropanel, #mp-footerpanel").animate({ left: "0px" });
                });
                //content
                $("#mp-contentholder").animate({ left: "300" }, function () {
                    $(".defaultBt").hide("slow");
                });

                resizeContent();
            });

            //hover menu item  
            $(".mp-menu").hover(
                 function () {
                     // this is the dom element hover
                     var index = $(".mp-menu").index(this);
                     $('.mp-menu').eq(index).addClass("transparent-black");
                 },
                 function () {
                     var index = $(".mp-menu").index(this);
                     $('.mp-menu').eq(index).removeClass("transparent-black");
                 }
            );

            //selected menu item  
            $(".mp-menu a").click(function () {
                $(".mp-menu a").removeClass("transparent-smoke");
                $(this).addClass("transparent-smoke");
            });

            //Đổi mật khẩu
            $('#LinkDoiMatKhau').bind('click', function (e) {
                // Triggering bPopup when click event is fired
                $('#popupDoiMatKhau').bPopup({
                    content: 'iframe', //'iframe' or 'ajax'
                    contentContainer: '.content',
                    loadUrl: '/Home/DoiMatKhau' //Uses jQuery.load()
                });

            });

            //menu  click
            $("#LinkQuanLyClaim").click(function () {
                //popupError("error!");
                loadContent("/Home/Content", "Claim");
            });

            $("#LinkTodoList").click(function () {
                loadContent("/Claim/Index", "Todolist");
            });

            $("#LinkMemos").click(function () {
                loadContent("/Claim/Index", "Memos");
            });

            $("#LinkTimesheet").click(function () {
                loadContent("/Diary/Index", "Lịch sử giao dịch");
            });

            $("#LinkDiary").click(function () {
                loadContent("/Diary/Index", "Diary");
            });

            $("#LinkLaiSuatTietKiem").click(function () {
                loadContent("/LaiSuat", "Lãi suất sổ tiết kiệm");
            });

            $("#LinkTyGia").click(function () {
                loadContent("/TyGia", "Tỷ Giá Hối Đoái");
            });

            $("#LinkThongKe").click(function () {
                loadContent("/Admin/ThongKe", "Thống kê");
            });

            $("#LinkBieuPhiDichVu").click(function () {
                loadContent("/User/BieuPhiDichVu", "Biểu phí dịch vụ");
            });

            $("#LinkHuongDanSuDung").click(function () {
                loadContent("/User/HuongDanSuDung", "Hướng dẫn sử dụng");
            });

            $("#LinkQuanLyGopY").click(function () {
                loadContent("/GopY", "Ý kiến khách hàng");
            });

            $(window).bind('beforeunload', function () { });
        });

        function showDialog(url, title, width, height) {
            $("#titleDialog").html(title);
            $("#contentDialog").html("");
            $("#contentDialog").height(height);
            $("#contentDialog").width(width);

            $('#popupShowDialog').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '#contentDialog',
                loadUrl: url //Uses jQuery.load()
            });
        }

        function sendMail(url, title) {
            $('#popupSendMail').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '#contentSendMail',
                loadUrl: url //Uses jQuery.load()
            });
        }
        
        function popupLaiSuat() {
            // Triggering bPopup when click event is fired
            $('#popupLaiSuat').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '.content',
                loadUrl: '/LaiSuat/Detail' //Uses jQuery.load()
            });
        }

        function popupThemNguoiDung() {
            // Triggering bPopup when click event is fired
            $('#popupThemNguoiDung').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '.content',
                loadUrl: '/NguoiDung/Create' //Uses jQuery.load()
            });
        }

        

        function popupTyGia() {
            $('#popupTyGia').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '.content',
                loadUrl: '/TyGia/Detail' //Uses jQuery.load()
            });
        }

        function popupThongBao(html) {
            $(".content").html(html);
            $('#popupThongBao').bPopup({
                contentContainer: '.content'
            });

        }

        function popupError(html) {
            $('#popupError').bPopup();
            var snd = new Audio("/Uploads/sound/error.wav"); // buffers automatically when created
            snd.play();
            $("#contentThongBao").html(html);
        }

        function popupThongKe(url, title) {
            $("#titleThongKe").html(title);

            $('#popupThongKe').bPopup({
                content: 'iframe', //'iframe' or 'ajax'
                contentContainer: '#contentThongKe',
                loadUrl: url
            });

        }

        //load ajax content
        function loadContent(Link, title) {
            var widthClient = $(window).width();
            $("#mp-contentholder").animate({ left: -widthClient }, function () {
                $("#mp-contentholder").css({ left: widthClient });
                $("#LabelTieuDe").text(title);

                $.ajax({
                    url: Link,
                    beforeSend: function () {
                        $("#mp-loading").css("display", "block");
                    },
                    success: function (data) {
                        $("#ContentUser").html(data);
                        var pleft = 300;
                        if (index != 0) pleft = 0;

                        $("#mp-contentholder").animate({ left: pleft }, function () {
                            $("#mp-loading").css("display", "none");
                        });
                    }
                });
            });
        }

        //load ajax content back
        function backContent(Link, title) {
            var widthClient = $(window).width();
            $("#mp-contentholder").animate({ left: widthClient }, function () {
                $("#mp-contentholder").css({ left: -widthClient });
                $("#LabelTieuDe").text(title);

                $.ajax({
                    url: Link,
                    beforeSend: function () {
                        $("#mp-loading").css("display", "block");
                    },
                    success: function (data) {
                        $("#ContentUser").html(data);
                        var pleft = 300;
                        if (index != 0) pleft = 0;

                        $("#mp-contentholder").animate({ left: pleft }, function () {
                            $("#mp-loading").css("display", "none");
                        });
                    },
                });
            });
        }

</script>

</head>

<body style="overflow-x: hidden;">

    <!-- START METRO PANEL -->
    <div id="metropanel" style="display: block; left: 0px; height: 1536px; background-color: rgb(0, 100, 100); background-position: initial initial; background-repeat: initial initial;">

        <div id="mp-headerpanel">
            <div id="mp-sitename">
                    <a href="/Home/">
                        <img src="/Images/icon_banking.png" height="50" align="left"  style="float:left;padding-right: 5px;">
                        <h2 style="color:#FFF">SAVVY </h2>
                        <p id="slogan" style="text-shadow: 1px 1px 5px; padding:0">Wellcome to Savvy!</p>
                    </a>
            </div>

            <div class="breakline transparent-smoke"></div>

            <div class="clearspace"></div>
        </div>

        <!-- The Main Item List -->
        <ul id="mp-menus" style="height: 408px; overflow: hidden; padding: 0px; width: 300px;" class="jspScrollable" tabindex="0">

            <div class="jspContainer" style="width: 300px; height: 408px;">
                <li id="LinkQuanLyClaim" class="mp-menu">
                    <a  class="mp-loadcontent transparent-smoke">
                        <span>Quản lý Claim</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkTaiKhoanNganHang" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Claim</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkTimesheet" class="mp-menu">
                    <a >
                        <span>Timesheet</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkDiary" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Memos</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkTodoList" class="mp-menu">
                    <a class="mp-loadcontent">
                        
                        <span>TodoList</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkDiary" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Diary</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkThongKe" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Báo cáo thống kê</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkQuanLyGopY" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Ý kiến khách hàng</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
                <li id="LinkHuongDanSuDung" class="mp-menu">
                    <a class="mp-loadcontent">
                        <span>Hướng dẫn sử dụng</span>
                        <div class="clearspace"></div>
                    </a>
                </li>
            </div>
        </ul>
        <!-- End Main Item List -->

        <div class="breakline transparent-smoke"></div>

        <!-- Recent Item -->
        <ul id="mp-recentitemholder"></ul>
        <!-- End Recent Item -->


        <!-- Footer Panel -->
        <div id="mp-footerpanel" style="background-color: rgb(0, 100, 100); display: block; left: 0px; background-position: initial initial; background-repeat: initial initial;">
            <div id="mp-collapse" class="mp-leftarrow"></div>
            <div id="mp-togglemenus" class="mp-rightarrow" style="float: right;"></div>
        </div>
        <!-- End Footer Panel -->
        <div style="clear: both;"></div>

    </div>
    <!-- END METRO PANEL -->



    <!-- Expand Button -->
    <div id="mp-expand" style="left: -70px; background-color: rgb(0, 100, 100); background-position: initial initial; background-repeat: initial initial;">
        <div id="mp-expand-bt"></div>
    </div>
    <!-- End Expand Button -->

    <!-- Expand Button Right-->
    <div id="mp-expand" class="defaultBt" style="background-color: rgb(0, 100, 100); background-position: initial initial; background-repeat: initial initial; right: 0; bottom: 0;">
        <div id="mp-expand-bt"></div>
    </div>
    <!-- End Expand Button -->



    <!-- START CONTENT -->
    <div id="mp-contentholder" style="float: left; position: relative; display: block; left: 300px;">
        <div style="padding: 0 20px 20px 20px">
            <div style="margin-bottom:10px;">

            <p style="text-align:right;color: gray;">Xin chào : <span class="hight" style="text-transform: uppercase;">Nguyễn Quốc Bảo </span>| <a id="LinkDoiMatKhau" href="#">Thay đổi mật khẩu</a> | <a href="#">Thoát</a></p>
            
                @*@Html.Partial("_HeaderAccount")*@

                <h2 id="LabelTieuDe" style="color: rgb(0, 158, 207); text-shadow: 0px 0px 4px rgb(126, 126, 126); text-transform: uppercase; font-style:italic;font-family:'Times New Roman',Georgia,Serif;">
                    Administrator
                </h2>

                <div style="clear:both;"></div>
            </div>


            <div id="ContentUser">
                 @RenderBody()
            </div>

            <div class="clearspace"></div>
        </div>
        <div class="clearspace"></div>
    </div>
    <!-- END CONTENT -->




    <!-- Loading Image -->
    <div id="mp-loading">
        <img src="/Images/metro-icons/loading.gif" width="30" alt="">
    </div>
    <!-- End Loading Image -->




    <!-- Content Station -->
    <div id="mp-contentStation">
        <!-- Create Default Content Package -->
        <div id="screenslider"></div>
    </div>
    <!-- End Content Station -->

    <!-- dialog -->
    <div id="popupShowDialog" class="popup" style="display: none;" >
        <span class="bClose"><span> X </span></span>
        <div id="titleDialog" class="headForm">Thông báo</div>
        <div id="contentDialog" class="content" style="height:220px;  overflow:hidden;" ></div>
        <div class="cleared"></div>
    </div>
    <!-- End dialog -->

    <!-- dialog -->
    <div id="popupSendMail" class="popup" style="display: none; width:650px;" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Send mail</div>
        <div id="contentSendMail" class="content" style="height:350px;  overflow:hidden;" ></div>
        <div class="cleared"></div>
    </div>
    <!-- End dialog -->

    <!-- DoiMatKhau -->
    <div id="popupDoiMatKhau" class="popup" style="display: none; width: 450px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Đổi Mật Khẩu</div>
        <div class="content" style="height:220px;  overflow:hidden;" ></div>
        <div class="cleared"></div>
    </div>
    <!-- End DoiMatKhau -->

    <!-- popup Lãi suât -->
    <div id="popupLaiSuat" class="popup" style="display: none; width: 600px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Lãi Xuất</div>
        <div class="content" style="height:370px;  overflow:hidden;" >
        </div>
        <div class="cleared"></div>
    </div>
    <!-- End popup Lai suat -->

    <!-- popup Tỷ giá -->
    <div id="popupTyGia" class="popup" style="display: none; width: 600px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Tỷ giá hối đoái</div>
        <div class="content" style="height:350px; overflow:hidden;"  >
        </div>
        <div class="cleared"></div>
    </div>
    <!-- End popup Lai suat -->

    <!-- popup Thêm người dùng -->
    <div id="popupThemNguoiDung" class="popup" style="display: none; width: 660px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Thêm người dùng</div>
        <div class="content" style="height:390px; overflow:hidden;"  >
        </div>
        <div class="cleared"></div>
    </div>
    <!-- End popup Thêm người dùng -->

    <!-- popup Cập nhật người dùng -->
    <div id="popupCapNhatNguoiDung" class="popup" style="display: none; width: 660px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Cập nhật người dùng</div>
        <div class="content" style="height:350px; overflow:hidden;"  >
        </div>
        <div class="cleared"></div>
    </div>
    <!-- End popup Thêm người dùng -->

    <!-- popup Thông báo-->
    <div id="popupThongBao" class="popup" style="display: none; width: 450px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Thông báo</div>
        <div class="content" style="min-height:100px; color:blue; padding:10px 10px 25px 10px;" ></div>
        <div style="float:right; margin-top:-40px; margin-right:20px;"><button style="padding:5px 20px; width:120px;" onclick="$('.bClose').click();">OK</button></div>
    </div>
    <!-- End popup Thông báo -->

    <!-- popup Thông báo-->
    <div id="popupError" class="popup" style="display: none; width: 450px" >
        <span class="bClose"><span> X </span></span>
        <div class="headForm">Thông báo</div>
        <div class="contentError" style="min-height:100px; color:red; padding:10px 10px 25px 10px;" >
            <table>
                <tr>
                    <td><img src="~/Images/error_48.png" /></td><td id="contentThongBao"></td>
                </tr>
            </table>
        </div>
        <div style="float:right; margin-top:-40px; margin-right:20px;"><button style="padding:5px 20px; width:120px;" onclick="$('.bClose').click();">OK</button></div>
    </div>
    <!-- End popup Thông báo -->

    <!-- popup Thống kê-->
    <div id="popupThongKe" class="popup" style="display: none; width: 920px" >
        <span class="bClose"><span> X </span></span>
        <div id="titleThongKe" class="headForm">Thống kê</div>
        <div id="contentThongKe" class="content"  style="height:600px; padding:0; overflow:hidden" ></div>
    </div>
    <!-- End popup Thống kê -->

</body>
</html>
